<div nz-row nzGutter="16" xmlns="http://www.w3.org/1999/html">
    <div nz-col nzXs="24" nzSm="16" nzLg="17" style="padding: 0 10px">
        <div nz-row [nzType]="'flex'" nzJustify="start" [nzGutter]="'24'" style="margin-top:15px">
            <div nz-col [nzSpan]="24">
                <div nz-row style="padding-bottom: 5px">
                    <div nz-col nzSm="12" nzMd="14" nzLg="17">
                        <div class="spon-title-container">
                            <div class="spon-title-button" nz-button [nzType]="'primary'">
                                <span>{{actInfo.actType}}</span>
                            </div>
                            <div class="spon-title-link">
                                <span class="spon-title-span overFlow">{{actInfo.actName}}</span>
                            </div>
                        </div>
                    </div>
                    <div nz-col nzSm="12" nzMd="10" nzLg="7" style="max-width: 240px">
                        <span nzSm="24" nzMd="12" class="overFlow">【 浏览次数：150 】</span>
                        <span nzSm="24" nzMd="12" class="overFlow">【 火热申请中 】</span>
                    </div>
                </div>
                <div nz-row style="padding-bottom: 5px">
                    <div style="display:flex;justify-content: flex-start;align-items: center">
                        <strong style="font-size: 30px;color:dodgerblue">|</strong>
                        <p style="font-size:20px;padding-left:5px">基本信息:</p>
                    </div>
                    <nz-card [nzNoPadding]="true" style="padding: 10px">
                        <div>
                            <p style="padding-bottom: 10px"><strong>活动类型：</strong>{{actInfo.actType}}</p>
                            <p style="padding-bottom: 10px"><strong>资金：</strong>{{actInfo.actMoney}}元</p>
                            <p style="padding-bottom: 10px"><strong>预付比例：</strong>{{actInfo.actProportion}}</p>
                            <p style="padding-bottom: 10px"><strong>物资：</strong>{{actInfo.actMater}}</p>
                            <p style="padding-bottom: 10px"><strong>起止时间：</strong>{{actInfo.actBegDate}}~{{actInfo.actEndDate}}
                            </p>
                            <p style="padding-bottom: 10px"><strong>活动地点：</strong>{{actInfo.actPlace}}</p>
                            <p style="padding-bottom: 10px"><strong>参与人数：</strong>{{actInfo.actNum}}</p>
                            <p style="padding-bottom: 10px"><strong>宣传方式：</strong>{{actInfo.actPropaWay}}</p>
                            <p style="padding-bottom: 10px"><strong>活动反馈：</strong>{{actInfo.actFeedback}}</p>
                        </div>
                    </nz-card>
                </div>
                <div nz-row style="padding-bottom: 10px">
                    <div style="display:flex;justify-content: flex-start;align-items: center">
                        <strong style="font-size: 30px;color:dodgerblue">|</strong>
                        <p style="font-size: 20px;padding-left:5px">活动详情:</p>
                        <!--此处需要活动编辑权限-->
                        <ng-container *ngIf="settings.app.menuShow">
                            <button nz-button [acl]="[1]" (click)="showEditor()">修改</button>
                        </ng-container>

                    </div>
                    <div class="article-html-container" [innerHTML]="articleHtml.content | html"></div>
                    <ng-container *ngIf="editorShow">
                        <ckeditor [(ngModel)]="articleHtml.content" debounce="500" [config]="config">
                        </ckeditor>
                        <button nz-button (click)="updateArticle()" [nzLoading]="updating">保存</button>
                    </ng-container>
                </div>
                <div nz-row nzJustify="start" style="padding-bottom: 10px">
                    <div style="margin-top: 16px;">
                        <nz-input [(ngModel)]="applyReason" nzType="textarea" [nzAutosize]="autosize"
                                  nzPlaceHolder="请输入申请理由"></nz-input>
                    </div>
                    <div style="width: 100%;display: flex;justify-content: center">
                        <button style="margin-top: 4px" nz-button (click)="applyActivity()">申请</button>
                    </div>

                    <div style="width: 100%;display: flex;justify-content: center">
                        <button style="margin-top: 4px" nz-button (click)="myApplyActivity()">查看我的申请</button>
                    </div>
                </div>
                <div nz-row style="padding-bottom: 10px">
                    <div
                        style="box-shadow: 0px 10px 10px #E8E8E8;height:40px;display:flex;justify-content: space-between;align-items: center">
                        <div>
                            <span style="background-color: #00A0E9;width:5px;padding-left:10px"></span>
                            <span style="font-size: 20px;padding-left: 5px">已申请人数：{{applicantCount}}人</span>
                        </div>
                    </div>
                    <div style="padding-top: 20px">
                        <div>
                    <span *ngFor="let avt of applicant;let i=index" style="padding-left:5px;padding-right:5px;">
                        <img src="./assets/img/logo.svg" style="width:60px;height:60px;border-radius: 100%"
                             *ngIf="i<20">
                    </span>
                        </div>

                    </div>
                </div>
                <div>
                    <div style="box-shadow: 0px 10px 10px #E8E8E8;height:40px;display:flex;justify-content: flex-start">
                        <span style="background-color: #00A0E9;width:5px;padding-left:10px"></span>
                        <span style="font-size: 20px;padding-left: 5px">相关热门推荐</span>
                    </div>
                    <div style="padding-top: 10px;display: flex;flex-direction: column">
                        <a *ngFor="let h of hottor;let i=index" style="padding-bottom: 10px">{{i}}.{{h}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div nz-col nzXs="24" nzSm="8" nzLg="7" style="padding: 0 10px">
        <div>
            <h2 style="background-color: lavender">发布人展示</h2>
            <nz-card>
                <ng-template #body>
                    <div style="text-align: center">
                        <img alt="example" width="100%" src="./assets/img/logo.svg"
                             style="width:100px;height:100px;border-radius: 100%"/>
                        <!--<h3>{{student.username}}</h3>-->
                        <p>{{student.campusName}}</p>
                        <div style="display:flex;justify-content: space-around;font-size: 1rem">
                            <span><i class="anticon anticon-idcard"></i></span>
                            <span><i class="fa fa-user"></i></span>
                            <span><i class="fa fa-mobile" style="font-size: 19px" nz-tooltip="手机号"></i></span>
                            <span>
                                <nz-tooltip [nzTitle]="'邮箱'" [nzPlacement]="'bottom'">
                                    <a nz-tooltip style="font-size: 1rem"><i class="anticon anticon-mail"></i></a>
                                </nz-tooltip>
                            </span>
                        </div>
                        <ng-container *ngIf="student.authForView =='0'">
                            <button nz-button [nzType]="'primary'" (click)="showModal()">查看发布人联系方式</button>
                        </ng-container>
                        <ng-container *ngIf="student.authForView =='1'">
                            <button nz-button [nzType]="'primary'" (click)="showModal()">查看发布人联系方式</button>
                        </ng-container>

                        <nz-modal [nzVisible]="isVisible" [nzTitle]="'学生社团信息'"
                                  [nzContent]="modalContent"
                                  (nzOnCancel)="handleCancel($event)"
                                  (nzOnOk)="handleOk($event)"
                                  [nzWidth]="350">
                            <ng-template #modalContent>
                                <div class="center-ctrl">
                                    <div class="model-content-container">

                                <span>
                                    <strong>真实姓名:</strong>
                                    {{student.username}}
                                </span>
                                <span>
                                    <strong>性别:</strong>
                                    {{student.sex}}
                                </span>
                                <span>
                                    <strong>电话:</strong>
                                    {{student.phone}}
                                </span>
                                </div>
                                </div>
                            </ng-template>
                        </nz-modal>
                    </div>
                </ng-template>
            </nz-card>
        </div>
        <div>
            <h2 style="background-color: lavender">该用户所有活动信息</h2>
            <nz-table #nzTable [(nzDataSource)]="userActList"
                      [nzIsPagination]="false">
                <thead nz-thead>
                <tr>
                    <th nz-th><span>标题</span></th>
                    <th nz-th><span>金额</span></th>
                </tr>
                </thead>
                <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let list of nzTable.data">
                    <td nz-td>{{list.actName}}</td>
                    <td nz-td>￥{{list.actMoney}}</td>
                </tr>
                </tbody>
            </nz-table>
            <div class="page-container">
                <nz-pagination [(nzPageIndex)]="page.pageNum" [nzTotal]="page.total"
                               [(nzPageSize)]="page.pageSize" (nzPageIndexChange)="getPage(page.pageNum)">
                </nz-pagination>
            </div>
        </div>
        <div>
            <nz-carousel nzAutoPlay>
                <img nz-carousel-content *ngFor="let image of advertise" src="./assets/img/logo.svg">
            </nz-carousel>
        </div>
    </div>
</div>

